
<template>
  <view class="resume-container">
    <!-- 固定顶部导航 -->
    <view class="fixed-header">
      <view class="header">
        <view class="back-button" @click="goBack">
          <image class="back-icon" src="/static/back.png"></image>
        </view>
        <text class="title">我的简历</text>
      </view>
    </view>

    <!-- 可滚动内容区域 -->
    <scroll-view class="scrollable-content" scroll-y>
      <!-- 附件简历部分 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">附件简历</text>
          <text class="resume-count">{{attachments.length}}/3</text>
        </view>
        
        <!-- 已上传的简历列表 -->
        <view class="resume-list" v-if="attachments.length > 0">
          <view class="resume-item" v-for="(item, index) in attachments" :key="index" @click="previewFile(index)">
            <view class="resume-content">
              <view class="file-info">
                <text class="file-name">{{item.name}}</text>
                <text class="update-time">{{item.updateTime}}更新</text>
              </view>
            </view>
            <view class="delete-btn" @click.stop="deleteFile(index)">
              <text class="delete-icon">×</text>
            </view>
          </view>
        </view>

        <!-- 未上传简历时的提示 -->
        <view class="empty-state" v-else>
          <image class="file-icon" src="/static/wenjian.png" mode="aspectFit"></image>
          <text class="empty-text">请先上传简历</text>
        </view>

        <!-- 上传按钮，当简历数量小于3时显示 -->
        <button class="upload-btn-bottom" @click="chooseFile" v-if="attachments.length < 3">
          上传简历
        </button>
      </view>

      <!-- 求职状态部分 -->
      <view class="section">
        <view class="section-header">
          <text class="section-title">求职信息</text>
        </view>
      
  		
        <view class="job-status">
          <view class="status-item">
            <text class="label">我现在</text>
            <view class="value" @click="updateStatus('current')">
              <text>{{currentStatus}}</text>
              <text class="arrow">></text>
            </view>
          </view>
          <view class="status-item">
            <text class="label">意向职位</text>
            <view class="value" @click="updateStatus('position')">
              <text>前端工程师,ARM工程师</text>
              <text class="arrow">></text>
            </view>
          </view>
          <view class="status-item">
            <text class="label">意向地点</text>
            <view class="value" @click="updateStatus('location')">
              <text>北京</text>
              <text class="arrow">></text>
            </view>
          </view>
          <view class="status-item">
            <text class="label">意向年薪</text>
            <view class="value" @click="updateStatus('salary')">
              <text>{{currentSalary}}</text>
              <text class="arrow">></text>
            </view>
          </view>
          <view class="status-item">
            <text class="label">学校类型</text>
            <view class="value" @click="updateStatus('school')">
              <text>{{currentSchool}}</text>
              <text class="arrow">></text>
            </view>
          </view>
          <view class="status-item">
            <text class="label">我的学历</text>
            <view class="value" @click="updateStatus('education')">
              <text>{{currentEducation}}</text>
              <text class="arrow">></text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 添加半屏弹窗 -->
    <view class="popup-mask" v-if="showStatusPopup" @click="closeStatusPopup"></view>
    <view class="popup-content" :class="{ 'popup-show': showStatusPopup }">
      <view class="popup-header">
        <text class="cancel-btn" @click="closeStatusPopup">取消</text>
        <text class="popup-title">{{popupTitle}}</text>
        <text class="confirm-btn" @click="confirmSelection">确定</text>
      </view>
      <view class="picker-view-container">
        <view class="picker-selected-mask"></view>
        <picker-view class="picker-view" :value="[selectedIndex]" @change="onPickerChange" :indicator-style="indicatorStyle">
          <picker-view-column>
            <view 
              class="picker-item" 
              :class="{ 'picker-item-selected': index === selectedIndex }"
              v-for="(option, index) in currentOptions" 
              :key="index"
            >
              {{option}}
            </view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>

    <!-- 薪资区间选择弹窗 -->
    <view class="popup-mask" v-if="showSalaryRangePopup" @click="showSalaryRangePopup = false"></view>
    <view class="popup-content salary-range-popup" :class="{ 'popup-show': showSalaryRangePopup }">
      <view class="popup-header">
        <text class="cancel-btn" @click="showSalaryRangePopup = false">取消</text>
        <text class="popup-title">选择薪资范围</text>
        <text class="confirm-btn" @click="confirmSalary">确定</text>
      </view>
      <view class="picker-view-container">
        <view class="picker-selected-mask"></view>
        <picker-view class="picker-view" :value="[startIndex, endIndex]" @change="onSalaryChange" :indicator-style="indicatorStyle">
          <picker-view-column>
            <view 
              class="picker-item" 
              v-for="(item, index) in salaryRangeLeft" 
              :key="index"
            >{{item}}</view>
          </picker-view-column>
          <picker-view-column>
            <view 
              class="picker-item" 
              v-for="(item, index) in salaryRangeRight" 
              :key="index"
            >{{item}}</view>
          </picker-view-column>
        </picker-view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      attachments: [
        {
          name: '张三的简历.pdf',
          updateTime: '2024-03-20 15:30',
          size: '2.5MB',
          path: 'mock/path/resume1.pdf'
        },
        {
          name: '前端开发简历.doc',
          updateTime: '2024-03-19 10:15',
          size: '1.8MB',
          path: 'mock/path/resume2.doc'
        }
      ],
      showStatusPopup: false,
      popupTitle: '',
      selectedIndex: 0,
      currentOptions: [],
      // 薪资区间选择相关数据
      startIndex: 0,
      endIndex: 0,
      salaryRangeLeft: ['不限', '5w', '10w', '15w', '20w', '25w', '30w', '35w', '40w', '45w', '50w', '60w', '70w', '80w', '90w', '100w'],
      salaryRangeRight: ['不限', '5w', '10w', '15w', '20w', '25w', '30w', '35w', '40w', '45w', '50w', '60w', '70w', '80w', '90w', '100w', '100w以上'],
      selectedSalaryRange: {
        start: '不限',
        end: '不限'
      },
      // 求职状态选项
      statusOptions: ['暂无工作，正在找', '在职中，看新机会', '暂不考虑找工作'],
      currentStatus: '暂无工作，正在找',
      // 学校类型选项
      schoolOptions: ['985、211、双一流', '211、双一流', '双一流', '普通本科', '专科'],
      currentSchool: '请选择学校',
      // 学历选项
      educationOptions: ['博士及以上', '博士', '硕士', '本科', '专科', '其他'],
      currentEducation: '请选择学历',
      indicatorStyle: 'height: 88rpx; border: none;',
      showSalaryRangePopup: false,
      currentSalary: '不限-不限' // 添加当前选中的薪资范围显示值
    }
  },
  methods: {
    goBack() {
      uni.navigateBack()
    },
    chooseFile() {
      if (this.attachments.length >= 3) {
        uni.showToast({
          title: '最多只能上传3份附件简历',
          icon: 'none'
        })
        return
      }
      
      // 使用 uni.chooseMessageFile 选择文件
      uni.chooseMessageFile({
        count: 1,
        type: 'file',
        extension: ['.pdf', '.doc', '.docx'],
        success: (res) => {
          if (res.tempFiles && res.tempFiles.length > 0) {
            const file = res.tempFiles[0]
            
            // 模拟上传进程
            uni.showLoading({
              title: '正在上传...'
            })

            // 模拟上传延迟
            setTimeout(() => {
              const mockFile = {
                name: file.name || '新简历' + (this.attachments.length + 1) + '.pdf',
                updateTime: this.formatDate(new Date()),
                size: this.formatFileSize(file.size || 3200000),
                path: file.path
              }

              this.attachments.push(mockFile)
              
              uni.hideLoading()
              uni.showToast({
                title: '上传成功',
                icon: 'success'
              })
            }, 1000)
          }
        },
        fail: (err) => {
          console.log('文件选择失败:', err)
          // 如果 chooseMessageFile 不支持，则降级处理
          uni.showLoading({
            title: '正在上传...'
          })

          // 模拟上传延迟
          setTimeout(() => {
            // 模拟新上传的文件
            const mockFile = {
              name: '新简历' + (this.attachments.length + 1) + '.pdf',
              updateTime: this.formatDate(new Date()),
              size: '3.2MB',
              path: 'mock/path/new_resume.pdf'
            }

            this.attachments.push(mockFile)
            
            uni.hideLoading()
            uni.showToast({
              title: '上传成功',
              icon: 'success'
            })
          }, 1000)
        }
      })
    },

    // 格式化文件大小
    formatFileSize(size) {
      if (size < 1024) {
        return size + 'B'
      } else if (size < 1024 * 1024) {
        return (size / 1024).toFixed(2) + 'KB'
      } else {
        return (size / (1024 * 1024)).toFixed(2) + 'MB'
      }
    },

    previewFile(index) {
      // 模拟预览操作
      uni.showToast({
        title: '正在预览文件：' + this.attachments[index].name,
        icon: 'none',
        duration: 2000
      })
    },

    deleteFile(index) {
      uni.showModal({
        content: '是否确认删除该简历？',
        success: (res) => {
          if (res.confirm) {
            this.attachments.splice(index, 1)
            uni.showToast({
              title: '删除成功',
              icon: 'success'
            })
          }
        }
      })
    },

    formatDate(date) {
      const year = date.getFullYear()
      const month = String(date.getMonth() + 1).padStart(2, '0')
      const day = String(date.getDate()).padStart(2, '0')
      const hours = String(date.getHours()).padStart(2, '0')
      const minutes = String(date.getMinutes()).padStart(2, '0')
      return `${year}-${month}-${day} ${hours}:${minutes}`
    },

    updateStatus(type) {
      this.selectedIndex = 0 // 重置选中索引
      
      if (type === 'current') {
        this.popupTitle = '我的求职状态'
        this.currentOptions = this.statusOptions
        const currentIndex = this.statusOptions.indexOf(this.currentStatus)
        this.selectedIndex = currentIndex >= 0 ? currentIndex : 0
      } else if (type === 'school') {
        this.popupTitle = '学校类型'
        this.currentOptions = this.schoolOptions
        const currentIndex = this.schoolOptions.indexOf(this.currentSchool)
        this.selectedIndex = currentIndex >= 0 ? currentIndex : 0
      } else if (type === 'education') {
        this.popupTitle = '我的学历'
        this.currentOptions = this.educationOptions
        const currentIndex = this.educationOptions.indexOf(this.currentEducation)
        this.selectedIndex = currentIndex >= 0 ? currentIndex : 0
      } else if (type === 'salary') {
        // 打开薪资区间选择弹窗
        this.showSalaryRangePopup = true;
        return;
      } else {
        const titles = {
          position: '意向职位',
          location: '意向地点'
        }
        uni.navigateTo({
          url: `/pages/resume/update-status?type=${type}&title=${titles[type]}`
        })
        return
      }
      
      this.showStatusPopup = true
    },

    onPickerChange(e) {
      this.selectedIndex = e.detail.value[0]
    },

    closeStatusPopup() {
      this.showStatusPopup = false
    },

    confirmSelection() {
      if (this.popupTitle === '我的求职状态') {
        this.currentStatus = this.statusOptions[this.selectedIndex]
      } else if (this.popupTitle === '学校类型') {
        this.currentSchool = this.schoolOptions[this.selectedIndex]
      } else if (this.popupTitle === '我的学历') {
        this.currentEducation = this.educationOptions[this.selectedIndex]
      }
      
      this.showStatusPopup = false
      
      uni.showToast({
        title: '修改成功',
        icon: 'success',
        duration: 1500
      })
    },
    // 薪资区间选择相关方法
    onSalaryChange(e) {
      const [startIdx, endIdx] = e.detail.value;
      this.startIndex = startIdx;
      
      // 计算右侧可选的最小索引
      const minEndIndex = startIdx === 0 ? 0 : startIdx;
      
      // 如果当前选中的结束值小于最小允许值，则自动调整
      if (endIdx < minEndIndex) {
        this.endIndex = minEndIndex;
      } else {
        this.endIndex = endIdx;
      }
      
      this.selectedSalaryRange.start = this.salaryRangeLeft[this.startIndex];
      this.selectedSalaryRange.end = this.salaryRangeRight[this.endIndex];
    },
    clearSalary() {
      this.startIndex = 0;
      this.endIndex = 0;
      this.selectedSalaryRange = {
        start: '不限',
        end: '不限'
      };
    },
    confirmSalary() {
      if (this.selectedSalaryRange.start === '不限' || this.selectedSalaryRange.end === '不限') {
        this.currentSalary = '不限-不限';
      } else {
        this.currentSalary = `${this.selectedSalaryRange.start}-${this.selectedSalaryRange.end}`;
      }
      this.showSalaryRangePopup = false;
      
      uni.showToast({
        title: '设置成功',
        icon: 'success',
        duration: 1500
      })
    }
  }
}
</script>

<style scoped>
.resume-container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
  position: relative;
  overflow: hidden;
}

.fixed-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: linear-gradient(135deg, #f0f9f4 0%, #e8f5e8 100%);
}

.scrollable-content {
  flex: 1;
  margin-top: 180rpx;
  padding: 24rpx;
  background: transparent;
  z-index: 10;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none; /* IE and Edge */
}

.scrollable-content::-webkit-scrollbar {
  display: none; /* Chrome, Safari, Opera */
}

.header {
  position: relative;
  background: transparent;
  padding: 110rpx 36rpx 40rpx;
  color: #333333;
  display: flex;
  justify-content: center;
  align-items: center;
}

.back-button {
  position: absolute;
  top: 98rpx;
  left: 36rpx;
  z-index: 10;
  width: 64rpx;
  height: 64rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(16, 185, 129, 0.15);
  border-radius: 50%;
  transition: all 0.3s ease;
  border: 1rpx solid rgba(16, 185, 129, 0.2);
}

.back-button:hover {
  background: rgba(16, 185, 129, 0.25);
  border-color: rgba(16, 185, 129, 0.3);
}

.back-icon {
  width: 36rpx;
  height: 36rpx;
  opacity: 0.8;
  transition: opacity 0.3s ease;
  filter: brightness(0);
}

.back-icon:active {
  opacity: 1;
}

.title {
  font-size: 36rpx;
  font-weight: 700;
  color: #333333;
  text-align: center;
  flex: 1;
}

.section {
  margin-bottom: 24rpx;
  background: rgba(255, 255, 255, 0.8);
  padding: 32rpx;
  backdrop-filter: blur(10px);
  border-radius: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 179, 134, 0.08);
}

.section-header {
  flex-direction: row;
  display: flex;
  align-items: center;
  margin-bottom: 24rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
  flex: 1;
}

.resume-count {
  font-size: 28rpx;
  color: #999;
  margin-right: 16rpx;
}

.add-btn {
  width: 48rpx;
  height: 48rpx;
  border-radius: 24rpx;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
  color: #666;
}

.resume-list {
  margin: 24rpx 0;
}

.resume-item {
  position: relative;
  background: #FFFFFF;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  border: 2rpx solid #00b386; /* 添加绿色边框 */
}

.resume-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.file-icon {
  width: 80rpx;
  height: 80rpx;
  margin-right: 24rpx;
}

.file-info {
  width: 100%;
}

.file-name {
  font-size: 28rpx;
  color: #333;
  margin-bottom: 8rpx;
  display: block;
  text-align: left;
}

.update-time {
  font-size: 24rpx;
  color: #999;
  text-align: left;
  display: block;
}

.delete-btn {
  position: absolute;
  top: 16rpx;
  right: 16rpx;
  width: 44rpx;
  height: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 22rpx;
  background: rgba(0, 0, 0, 0.1);
}

.delete-icon {
  color: #666;
  font-size: 32rpx;
  line-height: 1;
}

.job-status {
  background: #fff;
}

.status-item {
	  flex-direction: row;
  display: flex;
  align-items: center;
  padding: 32rpx 0;
  border-bottom: 1px solid #f0f0f0;
}

.status-item:last-child {
  border-bottom: none;
}

.label {
  width: 160rpx;
  font-size: 28rpx;
  color: #666;
}

.value {
  flex-direction: row;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 28rpx;
  color: #333;
}

.arrow {
  color: #999;
  margin-left: 16rpx;
}

.empty-state {
  padding: 32rpx 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-bottom: 0;
}

.empty-state .file-icon {
  width: 60rpx;
  height: 60rpx;
  margin: 0 0 12rpx 0;
  opacity: 0.5;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 32rpx;
}

.upload-btn {
  width: 240rpx;
  height: 80rpx;
  background: #00b386;
  color: #fff;
  font-size: 28rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.upload-btn:active {
  opacity: 0.8;
}

.upload-btn-bottom {
  width: 100%;
  height: 88rpx;
  background: #00b386;
  color: #fff;
  font-size: 28rpx;
  border-radius: 44rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 0;
  border: none;
}

.upload-btn-bottom:active {
  opacity: 0.8;
}

.popup-mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 998;
}

.popup-content {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  z-index: 999;
}

.popup-show {
  transform: translateY(0);
}

.popup-header {
	flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 32rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.popup-title {
  font-size: 32rpx;
  font-weight: 600;
  color: #333;
}

.cancel-btn, .confirm-btn {
  font-size: 28rpx;
  padding: 20rpx;
}

.cancel-btn {
  color: #666;
}

.confirm-btn {
  color: #333333;
}

.picker-view-container {
  position: relative;
  height: 480rpx;
}

.picker-selected-mask {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 88rpx;
  transform: translateY(-50%);
  background-color: rgba(0, 0, 0, 0.05);
  pointer-events: none;
  z-index: 1;
  border: none;
}

.picker-view {
  width: 100%;
  height: 100%;
}

.picker-item {
  line-height: 88rpx;
  text-align: center;
  font-size: 32rpx;
  color: #333;
}

/* 添加选中项的样式 */
.uni-picker-view-indicator {
  height: 88rpx !important;
}

.uni-picker-view-indicator::before,
.uni-picker-view-indicator::after {
  background-color: #f5f5f5 !important;
  height: 2rpx !important;
}

.picker-view .picker-item {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 当前选中项的样式 */
.picker-view .uni-picker-view-content > view.picker-item:nth-child(3) {
  color: #00b386 !important;
  font-weight: 500;
}

/* 更新状态项的值样式 */
.value text {
  color: #333;
  font-size: 28rpx;
}

.value text.selected {
  color: #333333;
}

.salary-range-popup {
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-radius: 24rpx 24rpx 0 0;
  transform: translateY(100%);
  transition: transform 0.3s ease-out;
  z-index: 999;
  padding: 32rpx;
  box-sizing: border-box;
  padding-bottom: 0; /* 移除底部padding */
}

.salary-range-popup.popup-show {
  transform: translateY(0);
}

.salary-range-content {
  flex-direction: row;
  display: flex;
  align-items: center;
  justify-content: space-around;
  margin-bottom: 32rpx;
}

.salary-range-column {
  flex: 1;
  align-items: center;
}

.salary-range-label {
  font-size: 28rpx;
  color: #666;
  margin-bottom: 24rpx;
}

.salary-range-options {
  flex-direction: row;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}

.salary-option {
  width: 120rpx;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 28rpx;
  color: #333;
  border: 1rpx solid #eee;
  border-radius: 40rpx;
  margin: 10rpx;
  background-color: #f9f9f9;
}

.salary-option.active {
  background-color: #00b386;
  color: #fff;
  border-color: #00b386;
}

.salary-range-divider {
  font-size: 32rpx;
  color: #333;
  margin: 0 20rpx;
}

.popup-footer {
  flex-direction: row;
  display: flex;
  justify-content: center;
}

.clear-btn {
  width: 240rpx;
  height: 80rpx;
  background: #f0f0f0;
  color: #333;
  font-size: 28rpx;
  border-radius: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
}

.clear-btn:active {
  opacity: 0.8;
}
</style> 